<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <template v-slot:before>
          本月{{ tips.dateRange }}：社保在缴
          {{ tips.socialSecurityCount }} 公积金在缴
          {{ tips.providentFundCount }} 增员 {{ tips.newsCount }} 减员
          {{ tips.reducesCount }} 入职 {{ tips.worksCount }} 离职
          {{ tips.leavesCount }}
        </template>
        <template v-slot:after>
          <el-button size="mini" type="danger">历史归档</el-button>
          <el-button size="mini" type="primary">{{ yearMonth }}报表</el-button>
        </template>
      </page-tools>
      <!-- 筛选组件 -->
      <!-- <social-tool /> -->
      <el-card class="hr-block">
        <el-table
          :data="list"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="username" label="姓名" sortable />
          <el-table-column prop="mobile" label="手机" sortable />
          <el-table-column prop="workNumber" label="工号" sortable />
          <el-table-column
            prop="departmentName"
            label="部门"
            sortable
            width="180"
          />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable />
          <el-table-column prop="leaveTime" label="离职时间" sortable />
          <el-table-column
            prop="participatingInTheCity"
            label="社保城市"
            width="180"
          />
          <el-table-column
            prop="providentFundCity"
            label="公积金城市"
            width="180"
          />
          <el-table-column prop="socialSecurityBase" label="社保基数" />
          <el-table-column prop="providentFundBase" label="公积金基数" />
          <el-table-column label="操作">
            <template #default>
              <el-button type="text" size="mini">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pageSize"
            layout="prev, pager, next"
            @current-change="pageChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getSocialList, getSettings } from '@/api/social'

@Component({ name: 'SocialTableIndex' })
export default class extends Vue {
  list = []
  yearMonth = ''
  page = {
    page: 1,
    pageSize: 10,
    total: 0
  }

  selectParams = {}
  tips = {}
  loading = false
  created() {
    // 获取社保列表
    this.getSocialList() // 获取列表数据
    this.getSettings()
  }

  async getSettings() {
    const { dataMonth } = await getSettings()
    this.yearMonth = dataMonth
  }

  goDetail() {
    return false
    // this.$router.push({ path: 'detail' })
  }

  async getSocialList() {
    try {
      const { rows, total } = await getSocialList({
        ...this.page,
        ...this.selectParams
      })
      this.list = rows // 列表数据
      this.page.total = total // 总数
    } catch (error) {
      console.log(error)
    } finally {
      this.loading = false
    }
  }

  changeSelectParams(selectParams: any) {
    (this.selectParams as any).departmentChecks = selectParams.departmentChecks
    ;(this.selectParams as any).providentFundChecks =
      selectParams.providentFundChecks
    ;(this.selectParams as any).socialSecurityChecks =
      selectParams.socialSecurityChecks
    this.page.page = 1
    this.getSocialList()
  }

  pageChange(page: number) {
    this.page.page = page // 当前
    this.getSocialList() // 获取列表数据
  }

  // 导出
  handleExport() {
    // GaolyQQ待实现
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
